<template>
<div class="main">
  <div class="jumbotron">
    <div class="wh" v-html="header.resContent"></div>
    <div class="lang">
      <div class="lang_2"></div>
    </div>    
  </div>
  <div class="w" style=" padding-bottom:20px;"> 
    <a-row :gutter="12" >	
      <a-col :xs=24 :sm=24 :md=12 :lg=6 :xl=6  v-for="item in card" :key="item.id">
        <div class="thumbnail">
          <a target="_blank" v-if="item.actionUrl" :href="item.actionUrl"><img :src="item.resUrl | setImgUrl"></a>
          <img v-else :src="item.resUrl | setImgUrl">
          <div class="caption" v-html="item.resContent"></div>
        </div>
      </a-col>               
    </a-row>
  </div>
</div>
</template>

<script>
import api from "@/global/api";
export default {
  async asyncData({$axios,route}) {
		let channel = route.name;
		let res = await $axios.get(api.getChannel,{params:{channel}})
		let pageData = res.data.pageData;
		let header = pageData.header;
		let card = pageData.card;
		let title = res.data.pageTitle;
		let description = res.data.pageDescription;			
		return {header,card,title,description}
  },
	head(){
		return{
			title:this.title,
			meta:[
				{hid:'description',name:'channel',content:this.description}
			]
		}
	},			
  methods: {
	},
	filters: {
		setImgUrl(val){
			return api.host+val;	
		}
	}
}
</script>

<style scoped>
.jumbotron { margin: 0 0 20px 0; color: #fff; position:relative;   background:#BD38B4 url(../assets/common-banner.png) no-repeat 0 0;  height:190px;}
.jumbotron >>> h1{ font-size:40px; font-weight:normal; margin:40px 0 20px 0; padding:0;}
.jumbotron >>> h4{ font-weight:normal; margin:0; font-size:15px; letter-spacing:1px;}
.lang {overflow:hidden;width:100%; position:absolute;left:0;opacity:.58;bottom:0;}
.lang_1 {background:url(../assets/banner-b.png) repeat-x;width:4500px;height:60px;animation:langs 12s infinite linear;position:absolute;top:0;}
.lang_2 {background:url(../assets/banner-t.png) repeat-x;width:4500px;height:55px;animation:langs 18s infinite linear;position:relative;top:0;}
@keyframes langs {0% {margin-left:0}
100% {margin-left:-1938px}
}
@-webkit-keyframes langs {0% {margin-left:0}
100% {margin-left:-1938px}
}

.thumbnail{  border:1px solid #DDDDDD; text-align:center; box-shadow: 0 2px 12px 0 rgba(0,0,0,.1); height:350px; background:#FFF; margin-bottom:12px; border-radius:2px;}
.thumbnail img{ width:100%;}
.caption{ padding:20px;}
.caption >>> p{ font-size:14px; line-height:1.6; padding-top:10px;}
</style>
